<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
	<style>
		.fc-row table{border-bottom: 0 hidden transparent !important;}
		.fc-button{height:2.5em;}
	</style>
	<div class="container-div" >
	<div class="row">
		<div class="col-sm-12 search-collapse">
			<div class="select-list">
				<ul>
					<li>
						字符集: <select id='locale-selector'></select>
					</li>
					<li>
						证件号码：<input type="text" id="empId" name="empId" value='14042319871217162X'/>
					</li>
					<li>
						<a class="btn btn-primary btn-rounded btn-sm" onclick="refreshCal()"><i class="fa fa-edit"></i>&nbsp;确定</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="col-sm-12 select-table table-striped">
			<div id='calendar' style="max-width: 900px;margin: 0 auto;"></div>
		</div>
	</div>
	</div>
	<div th:include="include :: footer"></div>
	<script th:inline="javascript">
		//$(function() {
			var prefix = ctx + "pm/empSignInfo";
			
			/* 
			var data = {};
			$.ajaxSettings.async = false;   // 关闭异步
			$.post(prefix + '/queryEmpSign', param, function(result) {
		        if (!!result) {
		        	data = result;
		        } else {
		            alert("网页错误，请重新刷新网站");	//异步调用失败
				}
			});
			$.ajaxSettings.async = true;   // 打开异步 */
			
			var initialLocaleCode = 'zh-cn';
		    var localeSelectorEl = document.getElementById('locale-selector');
		    var calendarEl = document.getElementById('calendar');

		    
		    var eventsFun = function(params, success, failure) {
    	  		//alert(JSON.stringify(params));
    	  		var start = params.start;
    	  		var end = params.end;
    	  		var curDate = new Date(start.getTime()+(end-start)/2);
    	  		var curYear = curDate.getFullYear();
    	  		var curMonth = '';
    	  		if(curDate.getMonth()+1<10)
    	  			curMonth = '0' + (curDate.getMonth()+1);
    	  		else
    	  			curMonth = '' + (curDate.getMonth()+1);
    	  		
    	  		var empId = $("input[name='empId']").val();
    	  		
    	  		var param = {
    					"year": curYear, // 当前年份
    					"month" : curMonth, //当前月份
    					"empId" : empId // 员工身份证号
    					};
    	  		
		        $.post(prefix + '/queryEmpSign', param, function(result) {
			        if (!!result) success(result.events);
				});
      		};
		    
		    
		    var calendar = new FullCalendar.Calendar(calendarEl, {
		      plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
		      header: {
		        //left: 'prev,next today',
		        left: '',
		        center: 'title',
		        //right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
		        right: 'today prev,next'
		      },
		      //theme: false,// 如果设置为true，则需要加载jquery ui相关css和js文件,默认值为false
		      //defaultDate: '2019-06-01', // 当初次加载日历的时候显示的初始日期。如果未指定，则默认是当前日期。
		      locale: initialLocaleCode,
		      buttonIcons: false, // 显示上一个下一个按钮
		      weekNumbers: true, // 显示周序号
		      navLinks: false, // “xx周”是否可以被点击，默认false，如果为true则周视图“周几”被点击之后进入日视图。
		      editable: false, // 是否可编辑
		      handleWindowResize: true, // 是否随浏览器窗口大小变化而自动变化
		      eventLimit: true, // 数据条数太多时，限制各自里显示的数据条数（多余的以“+2more”格式显示），默认false不限制,支持输入数字设定固定的显示条数
		      eventLimitText  : "更多", // 当一块区域内容太多以"+2 more"格式显示时，这个more的名称自定义（应该与eventLimit: true一并用）
		      //dayPopoverFormat : "YYYY年M月d日", // 点开"+2 more"弹出的小窗口标题，与eventLimitClick可以结合用
		      //aspectRatio:1.35,// 设置日历单元格宽度与高度的比例
		      //events: data.events
		      events: eventsFun
		    });

		    calendar.render();

		    calendar.getAvailableLocaleCodes().forEach(function(localeCode) {
		      var optionEl = document.createElement('option');
		      optionEl.value = localeCode;
		      optionEl.selected = localeCode == initialLocaleCode;
		      optionEl.innerText = localeCode;
		      localeSelectorEl.appendChild(optionEl);
		    });

		    localeSelectorEl.addEventListener('change', function() {
		      if (this.value) {
		        calendar.setOption('locale', this.value);
		      }
		    });
		    
		 // });
		
		function refreshCal(){
			calendar.refetchEvents();// 刷新数据
		}
		
	</script>
</body>
</html>